<template> 
    <div class="ilogin">
      <div><strong>登录</strong><p>手机验证登录</p></div>
        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="0px" class="demo-ruleForm">
            <el-form-item
                prop="age"
                :rules="[
                { required: true, message: '请输入手机号'},
                {pattern: /^1[34578]\d{9}$/, trigger: 'blur',message: '请输入正确的手机号'}
                ]"
            >
                <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>

               <el-form-item
                prop="pass"
                :rules="[
                { required: true, message: '密码不能为空'},
                { type: 'number', message: '年龄必须为数字值'}
                ]"
            >
                <el-input type="password"  v-model.number="numberValidateForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
              </el-form-item>
            <!-- 验证码 -->


           <div><input type="text" name="" id="" v-model="yanzm"></div> <yz @click="yzm" :identifyCode="identifyCode"></yz>
         
            
             <div> <el-checkbox v-model="checked">备选项</el-checkbox><p>忘记密码</p></div>
            <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                <el-button @click="resetForm('numberValidateForm')">会员注册</el-button>
            </el-form-item>
            <div>提示：未注册用户将直接注册成为礼拜五用户</div>
            <div>用合作网站登录</div>
            <div><span>微信</span><span>qq</span></div>
        </el-form>


        
    </div>
</template>
<script>
import yanz from "@/components/lxc/yanzhengma.vue";
import axios from "axios";

export default {
    name:'ilogin',
  components: {
    yz:yanz,
  },
data() {
      return {
        identifyCode:'',
         checked: true,
         yanzm:'',
        numberValidateForm: {
          age: '',
          pass:'',
        }
      };
    },
    mounted(){
      for(var i=0;i<4;i++){
      this.identifyCode=this.identifyCode+ Math.floor(Math.random() * (10 - 1 + 1) + 0);
      }


    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.checked){
              if(this.yanzm==this.identifyCode){
                // 这里写成功的函数
                  window.console.log(this.numberValidateForm.age+'++++'+this.numberValidateForm.pass);
                  //  登录验证
                   var url = "http://localhost:3000";
                    axios.post(url + "/login/user",{id:this.numberValidateForm.age,pass:this.numberValidateForm.pass})
                        .then(response => {
                          if(response.data[0]==1){
                            this.$router.push({name:'home',params:{ id:response.data[1]}});
                            localStorage.userid = response.data[1];//添加
                          }
                        })
                        .then(() => {
                        });
              }else{
                alert('验证码不正确')
              }
            }else{
              alert('请点击阅读选框')
            }
           
          } 
        });
      },
      resetForm() {
          
        window.console.log( this.identifyCode)
      },
      yzm(){
      }
    }
}
</script>
<style>
  .ilogin{
    width: 300px;
    height: 400px;
    background: #ccc;
  }
</style>